<template>
	<view class="navbar" :style="{'height':titleBarHeight + 'px'}">
		<uni-icons type="left" size="19" @click="goBack"></uni-icons>

		<text>{{title}}</text>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		name: "nav-bar",
		props: {
			title: {
				type: String,
				default: '自定义标题'
			}
		},
		onReady() {
			console.log(uni.getMenuButtonBoundingClientRect().top, this.statusBarHeight);
			//2.计算 标题栏高度，单位：px，计算公式：小胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 + uni
				.getMenuButtonBoundingClientRect().height;
			//3.计算 页面头部高度，单位：px，计算公式：导航栏高度 + 状态栏高度
			// this.headerHeight = this.statusBarHeight + this.titleBarHeight;
		},
		computed: {
			...mapGetters(['device_info']),
			statusBarHeight() {
				return this.device_info.statusBarHeight
			}
		},
		data() {
			return {
				titleBarHeight: 0,
			};
		},
		methods: {
			goBack() {
				uni.navigateTo({
					url: 'bankcard'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	uni-icons {
		position: absolute;
		left: 10rpx;
		top: 50%;
		transform: translateY(-50%);
	}
</style>
